<template>
    <div>
        <div v-if="show">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
                <el-form-item label="所属仓库" prop="wId">
                    <el-select v-model="formInline.wId" placeholder="请选择仓库">
                        <el-option v-for="item in options" :key="item.wId" :label="item.name" :value="item.wId"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作类型" prop="cate">
                    <el-select v-model="formInline.cate" placeholder="请选择操作类型">
                        <el-option v-for="item in option" :key="item.cate" :label="item.name" :value="item.cate"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
                    <el-button plain type="primary" @click="Reset" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="Searchrefresh">
            <el-tooltip placement="top">
                <div slot="content">{{ disabled ? '显示搜索' : '隐藏搜索' }}</div>
                <el-button icon="el-icon-search" circle @click="Showorhide()"> </el-button>
            </el-tooltip>
            <el-tooltip content="刷新" placement="top">
                <el-button icon="el-icon-refresh-left" circle @click="Reset()"></el-button>
            </el-tooltip>
        </div>
        <!-- 数据 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" align="center"> </el-table-column>
            <el-table-column prop="createTime" label="时间" align="center"> </el-table-column>
            <el-table-column prop="wName" label="仓库" align="center"> </el-table-column>
            <el-table-column prop="shelvesName" label="货架" align="center"> </el-table-column>
            <el-table-column prop="name" label="货品名称" align="center"> </el-table-column>
            <el-table-column prop="number" label="货品编号" align="center"> </el-table-column>
            <el-table-column prop="spec" label="货品规格" align="center"> </el-table-column>
            <el-table-column prop="infoRealStock" label="发生数量" align="center"> </el-table-column>
            <el-table-column prop="cate" label="操作类型" align="center"> 
                <template slot-scope="scope">
{{scope.row.cate ==0? '入库' : scope.row.cate ==1? '出库' : scope.row.cate ==3?  ' 盘库' : '' }}
                </template>
            </el-table-column>
            <el-table-column prop="fragile" label="操作人"> </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
            style="float:right;"
            background
            v-if="hide"
                @size-change="handleSizeCha"
                @current-change="handleCurrentCha"
                :current-page="formInline.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="formInline.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { Warehousedata, Ledgerdata } from '../../api/user.js';
export default {
    data() {
        return {
            // 所属仓库
            options: [],
            // 操作类型
            option: [
                {
                    name: '入库',
                    cate: 0
                },
                {
                    name: '出库',
                    cate: 1
                },
                {
                    name: '盘库',
                    cate: 3
                }
            ],
            // 搜索栏
            formInline: {
                pageNum: 1,
                pageSize: 10
            },
            // 数据总条数
            total: undefined,
            // 显示隐藏
            show: true,
            disabled: false,
            // 页面渲染数据
            tableData: [],
            hide:false
        };
    },
    methods: {
        // 所属仓库
        Warehouse() {
            Warehousedata().then((ref) => {
                // console.log(ref);
                this.options = ref.rows;
            });
        },
        // 搜索
        search() {
            Ledgerdata(this.formInline).then((ref) => {
                // console.log(ref);
                this.tableData = ref.rows;
                this.total = ref.total;
                if(ref.rows == ''){
                    this.hide = false
                }else{
                    this.hide = true
                }
            });
        },
        // 重置
        Reset() {
            this.$refs.formInline.resetFields();
            // formInline
            this.search()
        },
        // 显示隐藏
        Showorhide() {
            (this.show = !this.show), (this.disabled = !this.disabled);
        },
        // 页面渲染分页
        handleSizeCha(val) {
            this.formInline.pageSize = Number(val);
            this.search();
        },
        // 页面渲染分页
        handleCurrentCha(val) {
            this.formInline.pageNum = Number(val);
            this.search();
        }
    },
    mounted() {
        this.Warehouse();
        this.search();
    }
};
</script>

<style lang="less" scoped>
/deep/.el-form--inline .el-form-item__label{
    font-weight: 700 !important;
}
.Searchrefresh{
    float: right;
    margin:0px 0px 10px;
}
.block{
    height: 20px;
    margin-top: 10px;
}
</style>